<template>
  <div style="width: 100%; margin-top: 30px">
    <div class="tui">
      <div class="left_lt" @click="leftTab" ref="leftJian">
        <IconFont type="icon-fanhui" />
      </div>
      <div class="right_gt" @click="rightTab" ref="rightJian">
        <IconFont type="icon-jinru" />
      </div>
      <div class="one">
        <div style="display: flex; align-items: center">
          <h2>今日推荐</h2>
          <span style="margin-left: 15px; color: #c28f66">开通会员免费用</span>
          <p
            style="
              width: 100px;
              height: 30px;
              background-color: #f3f4f7;
              color: #1f69ff;
              border-radius: 20px;
              text-align: center;
              line-height: 30px;
              font-weight: bold;
              margin-left: 50px;
              cursor: pointer;
            "
          >
            精选推荐
          </p>
        </div>
        <div>
          <Genfduo></Genfduo>
        </div>
      </div>
      <div style="display: flex">
        <div class="left">
          <div
            class="left_1"
            style="
              width: 190px;
              height: 150px;
              border: 1px solid #ccc;
              border-radius: 15px;
              text-align: center;
              box-sizing: border-box;
              padding: 20px 20px;
            "
          >
            <div
              style="
                width: 70px;
                height: 70px;
                border-radius: 60px;
                background-color: #1f69ff;
                margin: 0 auto;
                margin-bottom: 10px;
                box-sizing: 20px;
                position: relative;
              "
            >
              <div
                style="
                  width: 50px;
                  height: 3px;
                  background-color: #ffffff;
                  position: absolute;
                  top: 34px;
                  left: 11px;
                  border-radius: 5px;
                "
              ></div>
              <div
                style="
                  width: 3px;
                  height: 50px;
                  background-color: #ffffff;
                  position: absolute;
                  top: 11px;
                  left: 34px;
                  border-radius: 5px;
                "
              ></div>
            </div>
            <span>空白创建</span>
          </div>
          <div>
            <img
              style="width: 190px; height: 100px; margin-top: 20px; border-radius: 10px"
              class="imgs"
              :src="imgs"
              alt=""
            />
          </div>
        </div>
        <div class="tui_li" ref="tuiDom">
          <div class="tui_li1" :style="{ width: (185 + 20) * data.arrs.length + 'px' }" ref="liDom">
            <div class="two" v-for="(item, index) in data.arrs" :key="index">
              <Card
                class="list_one"
                :chartData="item"
                :height="'270'"
                :longHeight="'270'"
                :posterHeight="'270'"
              ></Card>
            </div>
            <div style="width: 12%; height: 100%; text-align: center">
              <RouterLink to="/gengduo">
                <div
                  class="icon"
                  style="
                    margin: 0 auto;
                    width: 60px;
                    height: 60px;
                    box-shadow: 0 0 10px 3px #ccc;
                    border-radius: 60px;
                    font-size: 40px;
                    text-align: center;
                    line-height: 70px;
                    margin-top: 120px;
                    margin-bottom: 20px;
                  "
                >
                  <el-icon>
                    <Right />
                  </el-icon>
                </div>
              </RouterLink>
              <span>查看更多 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import Genfduo from '../gengduo/GengDuo.vue';
import img from '../../assets/44.jpg';
import imgs from '../../assets/haibao.webp';
//控制点击事件的点击
const inShow = ref(true);
//获取外层盒子dom元素
const tuiDom = ref();

//里层盒子dom元素
const liDom: any = ref();
//左箭头的dom元素
const leftJian = ref();
//右箭头的dom元素
const rightJian = ref();
//存放所有盒子的长度
const childLength = ref();
//存放子元素盒子的宽度
const chilWidth = ref();
//最后一个子元素距离左边的距离
const LastChildLeft = ref();
onMounted(() => {
  //把里层盒子里面所有的子元素的长度赋值给childLength；
  childLength.value = liDom.value.children.length;
  //把第一个子元素的宽度度赋值给chilWidth
  chilWidth.value = liDom.value.children[0].scrollWidth;
  LastChildLeft.value = liDom.value.children;
  
  
});

//监听页面尺寸的变化
window.addEventListener('resize', () => {
  //页面发生变化的时候把里层盒子里面的第一个子元素的滚动宽度赋值给chilWidth
  chilWidth.value = liDom.value.children[0].scrollWidth;
});

const weizhi = ref(0);


//点击左箭头切换内容
const leftTab = () => {

  // 调用复用柯里化
  ScrollFc(tuiDom.value,tuiDom.value.scrollLeft - (chilWidth.value * 15),0)(rightJian.value,'block');

  if(tuiDom.value.scrollLeft - (chilWidth.value)*15 <=0){
    ScrollFc()(leftJian.value,'none');
  }

};

//点击右箭头切换内容
const rightTab = () => {
 

   //调用复用柯里化
   ScrollFc(tuiDom.value,tuiDom.value.scrollLeft + (chilWidth.value * 15),0)(leftJian.value,'block');

    if((tuiDom.value.scrollLeft + (chilWidth.value * 15)+ tuiDom.value.offsetWidth ) >=tuiDom.value.scrollWidth){
      // 调用柯里化
       ScrollFc()(rightJian.value,'none')(leftJian.value,'block');
    }

};


//复用柯里化函数 里面3个参数1.滚动的dom元素，2.
function ScrollFc(DomElement?:HTMLElement,Xto?:number,Yto?:number){
    if(DomElement) DomElement.scrollTo(Xto ? Xto:0,Yto?Yto:0);
    return function (LeftStyleElement?:any,RevealoHidden?:string){
        if(LeftStyleElement) LeftStyleElement.style.display = RevealoHidden;
        return function (RightStyleEmelent?:any,RevealoHidden1?:string){
           if(RightStyleEmelent) RightStyleEmelent.style.display = RevealoHidden1;
        };
    };
};


const data: any = reactive({
  arrs: []
});

(async () => {
  const result = await axios.get('/api/get/getchart');

  data.arrs = result.data.data;
})();
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.tui {
  width: 100%;
  height: 430px;
  position: relative;

  .left_lt {
    position: absolute;
    top: 202px;
    left: 255px;
    display: none;
  }

  .left_lt:hover,
  .right_gt:hover,
  .icon:hover {
    background-color: #1f69ff;
    color: #fff;
  }

  .right_gt,
  .left_lt {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 40px;
    position: absolute;
    top: 202px;
    right: 15px;
    z-index: 9999;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0px 0px 1px 2px #ccc;
  }

  .one {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: space-between;
  }

  .left {
    width: 200px !important;
    height: 100%;
    margin-top: 25px;

    .left_1:hover {
      transform: scale(1.1);
      transition: all 0.5s;
      box-shadow: 0px 0px 10px 1px #ccc;
    }

    .left_1,
    .imgs {
      transition: all 0.5s;
    }

    .imgs:hover {
      transition: all 0.5s;
      transform: translateY(-5px);
      box-shadow: 0px 0px 10px 5px #ccc;
    }
  }

  .tui_li {
    // // overflow: hidden;
    margin-left: 20px;
    scroll-behavior: smooth;
    overflow-x: scroll;

    .tui_li1 {
      display: flex;
      height: 400px;
      margin-top: 10px;
    }

    .two {
      width: 15%;
      margin-top: 15px;
    }

    .list_one {
      width: 100%;
      margin-right: 10px;
      text-align: center;
      margin: 0;
    }
  }
  .tui_li::-webkit-scrollbar {
    display: none;
  }
}
</style>
